<template>
  <div>
    <bread-crumb name1="商品管理" name2="分类参数"></bread-crumb>
    <el-card>
      <!-- alert提示 -->
      <el-alert
        title="注意：只能为第三级分类设置相关参数"
        type="warning"
        :closable="false"
        show-icon
      >
      </el-alert>
      <!-- 级联选择器 -->
      <el-row>
        <el-col :span="10">
          <span>选择商品分类：</span>
          <el-cascader
            v-model="selectedKeys"
            :options="goodsCateOptions"
            :props="{ expandTrigger: 'hover', ...goodsCateOptionsProps }"
            @change="getGoodsCateChange"
          ></el-cascader>
        </el-col>
      </el-row>

      <!-- 动态静态参数 -->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <!-- disabled为true还是false取决于selectedKeys.length是否大于0 -->
        <el-tab-pane label="动态参数" name="many" :disabled="tabPaneDisabled">
          <el-row>
            <el-col :span="4">
              <el-button
                type="primary"
                :disabled="tabPaneDisabled"
                @click="showAddParamsDialog"
                >添加参数</el-button
              >
            </el-col>
          </el-row>
          <!-- 渲染动态参数 -->
          <el-table :data="manyTableData" style="width: 100%" border stripe>
            <el-table-column type="expand">
              <template slot-scope="scoped">
                <div>
                  <el-tag
                    v-for="(item, index) in scoped.row.attr_vals"
                    :key="index"
                    closable
                    @close="delTagAttrVals(index, scoped.row)"
                  >
                    {{ item }}
                  </el-tag>
                  <el-button
                    size="mini"
                    v-if="scoped.row.inputVisible == false"
                    @click="showInput(scoped.row)"
                    >+ New Tag</el-button
                  >
                  <el-input
                    v-model="scoped.row.inputValue"
                    placeholder="请输入内容"
                    v-else
                    @blur="addTag(scoped.row)"
                    @keyup.enter.native="addTag(scoped.row)"
                    ref="addTagInpRef"
                  ></el-input>
                  <!--.native 可以在某组件的根元素上监听一个原生事件 -->
                </div>
              </template>
            </el-table-column>
            <el-table-column label="#" type="index"></el-table-column>
            <el-table-column prop="attr_name" label="参数名称">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scoped">
                <div>
                  <p>{{ scoped.row.attr_vals }}</p>
                  <el-button type="primary" icon="el-icon-edit">编辑</el-button>
                  <el-button type="danger" icon="el-icon-delete"
                    >删除</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="静态参数" name="only" :disabled="tabPaneDisabled">
          <el-row>
            <el-col :span="4">
              <el-button
                type="primary"
                :disabled="tabPaneDisabled"
                @click="showAddParamsDialog"
                >添加参数</el-button
              >
            </el-col>
          </el-row>
          <el-table :data="onlyTableData" style="width: 100%" border stripe>
            <el-table-column type="expand"></el-table-column>
            <el-table-column label="#" type="index"></el-table-column>
            <el-table-column prop="attr_name" label="参数名称">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scoped">
                <div>
                  <p>{{ scoped.row.attr_vals }}</p>
                  <el-button type="primary" icon="el-icon-edit">编辑</el-button>
                  <el-button type="danger" icon="el-icon-delete"
                    >删除</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 添加参数 -->
    <el-dialog
      :title="'添加' + textTitle"
      :visible.sync="addParamsDdialogVisible"
      width="80%"
    >
      <el-form
        ref="addParamsFormRef"
        :model="addParamsForm"
        :rules="addParamsFormRules"
        label-width="80px"
      >
        <el-form-item label="参数名称" prop="attr_name">
          <el-input v-model="addParamsForm.attr_name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addParamsDdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addParamsBtn">添加分类参数</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import BreadCrumb from "@/components/common/breadcrumb/BreadCrumb";
import { goods_cate_req } from "@/api/goods.js";
import {
  cate_params_req,
  add_params_req,
  edit_params_req,
} from "@/api/cateParams.js";
export default {
  mounted() {
    this.getGoodsCateList();
  },
  data() {
    return {
      // 级联选择器选中的值
      selectedKeys: [],
      // 级联选择器中渲染的值
      goodsCateOptions: [],
      // props配置
      goodsCateOptionsProps: {
        label: "cat_name",
        value: "cat_id",
        children: "children",
      },
      // tab v-model 使用绑定的数据
      activeName: "many",
      // table数据有两种情况 一种是动态参数many  一种静态参数 only
      manyTableData: [],
      onlyTableData: [],
      // 控制添加分类的对话框
      addParamsDdialogVisible: false,
      // 添加分类的form
      addParamsForm: {
        attr_name: "",
      },
      // 添加分类的form的规则
      addParamsFormRules: {
        attr_name: [
          { required: true, message: "请输入参数名称", trigger: "blur" },
        ],
      },
      // 添加tag
      newAttr: "",
    };
  },
  components: {
    BreadCrumb,
  },
  methods: {
    async getGoodsCateList() {
      const result = await goods_cate_req();
      console.log(result);
      if (result.meta.status !== 200) {
        return this.$message.error("商品分类请求失败");
      }
      this.goodsCateOptions = result.data;
    },
    // tab切换时会触发的事件
    handleClick() {
      // console.log(tab, event);
      this.getGoodsParams();
    },
    // 当级联选择器的值发生改变时获取动态或者静态参数参数
    getGoodsCateChange() {
      console.log(this.selectedKeys);
      console.log(this.activeName);
      this.getGoodsParams();
    },
    // 专门获取动态或者静态参数
    async getGoodsParams() {
      const result = await cate_params_req({
        method: "get",
        url: `categories/${this.cat_id}/attributes`,
        params: { sel: this.activeName },
      });
      console.log(result);
      // 为了使用el-tag完成attr_vals的操作 需要 将字符串变为数组
      // 使用split将字符串变为数组  如果是空串 默认称为[]
      result.data.forEach((item) => {
        item.attr_vals = item.attr_vals ? item.attr_vals.split(" ") : [];
        item.inputValue = "";
        // 控制el-input输入框的显示隐藏
        item.inputVisible = false;
      });

      if (result.meta.status !== 200) {
        return this.$message.error("参数获取失败！");
      }
      // 根据this.activeName进行判断当前是静态还是动态
      if (this.activeName == "many") {
        this.manyTableData = result.data;
      } else {
        this.onlyTableData = result.data;
      }
    },
    // 控制添加参数对话显示 隐藏
    showAddParamsDialog() {
      this.addParamsDdialogVisible = true;
    },
    // 添加分类名称
    addParamsBtn() {
      // 当符合验证规则后 提交数据
      this.$refs.addParamsFormRef.validate(async (valide) => {
        if (!valide) return;
        // 符合规则
        // 找到对应的参数 提交服务器 api 封装接口
        const result = await add_params_req({
          method: "post",
          url: `categories/${this.cat_id}/attributes`,
          data: {
            attr_name: this.addParamsForm.attr_name,
            attr_sel: this.activeName,
          },
        });
        console.log(result);
        if (result.meta.status !== 201) {
          this.$message.error("添加分类名称失败");
        }
        this.getGoodsParams();
        this.addParamsDdialogVisible = false;
      });
    },
    // 展示attr_vals添加的输入框
    showInput(row) {
      row.inputVisible = true;
      // 展示input输入框时自动获取焦点
      // this.$refs.addTagInpRef.focus();
      this.$nextTick(() => {
        console.log(this.$refs.addTagInpRef);
        this.$refs.addTagInpRef.focus();
      });
    },
    addTag(row) {
      // 收集到input框中的值
      console.log(row.inputValue);
      // 收集到input框当中的值是否是空格 就不往 attr_vals加入 如果不是空格加入
      // trim().length
      if (row.inputValue.trim().length == 0) {
        row.inputValue = "";
        return;
      }
      row.attr_vals.push(row.inputValue);
      row.inputValue = "";

      // 发送请求
      this.updateParamsAttr(row);
      row.inputVisible = false;
    },
    // 删除tag触发的事件
    delTagAttrVals(index, row) {
      row.attr_vals.splice(index, 1);
      this.updateParamsAttr(row);
    },
    // 更新参数属性的方法
    async updateParamsAttr(row) {
      const result = await edit_params_req({
        method: "put",
        url: `categories/${this.cat_id}/attributes/${row.attr_id}`,
        data: {
          attr_name: row.attr_name,
          attr_sel: row.attr_sel,
          attr_vals: row.attr_vals.join(" "),
        },
      });
      console.log(result);
    },
  },
  computed: {
    tabPaneDisabled() {
      return this.selectedKeys.length > 0 ? false : true;
    },
    cat_id() {
      return this.selectedKeys[this.selectedKeys.length - 1];
    },
    textTitle() {
      return this.activeName == "many" ? "动态分类参数" : "静态分类参数";
    },
  },
};
/* 
1.分析布局
  第二部分 需要级联选择器  需要先进行请求 级联选择器需要渲染的商品分类三级数据
  有该接口 有 直接调用 分析参数  api goods.js 有这个接口
      调用该接口 进行请求
        发送请求的方法一般都写在methods当中  哪里使用哪里调
      默认组件刷新就有的数据 created或 mounted中  
      有数据 渲染到级联选择器中
      排版不太对
      el-row 行   el-col 列 24 :span 控制

  如果没有 封装接口（根据接口文档） 选用模块化语法（如何暴露如何引入）封装接口（参数）   调用接口 

  第三部分： tabs切换
  没有使用过的组件 先在element plugins中引入组件 注册组件
  tabs切换的基本操作完成之后
  思考一个问题？ 没有选中商品分类 静态参数和动态参数可以使用用吗？即使切换了里面的按钮是否能使用
  
  当级联选择器没有选中任何商品分类 tabs切换禁用 灰色 里面按钮也是灰色的
  tab-pane是否禁用  disabled是否为true   selecetedKeys.length>0

  获取动态参数和静态参数     接口文档 读取文档 找接口
        什么时候获取参数  当级联选择器选中之后获取参数 @change
        查找 参数 
          分类的id  this.selectedKeys
          请求动态参数和静态参数  this.activeName
        封装接口
        引入接口
        发送请求 请求回来数据  
  进行渲染
  table
  渲染 分了两种情况 静态参数 动态参数
  添加参数
  收集参数 验证成功之后 封装api接口  调用接口 提交 更新服务器数据










*/
</script>

<style lang="scss" scoped>
.el-tag {
  margin: 5px;
}
</style>